<template>
	<view class="content">
		<view class="date">
			<text class="text-bold text-white text-sl">{{date}}</text>
		</view>
		<view class="play">
			<view class="music-name">

			</view>
			<view class="play-status">

			</view>

			<view class="play-control">
				
               <!--17-18行： 播放音乐的按钮 -->
				<!-- <view class="text-xsl" @click="isPlay ? pauseMusic():play()">
					<text :class="isPlay ? 'cuIcon-stop':'cuIcon-video'"></text>
				</view> -->

			</view>
		</view>
		<view class="end-sleep" @click="jumpToEndSleep">
			<text class="text-bold text-white">结束睡眠</text>
		</view>
		<!-- 对话框 -->
		<uni-popup ref="popup" type="center" :maskClick="status">
			<view class="popup-content">
				<!-- 提示图 -->
				<view class="note-img">
				</view>
				<view class="prompt-info text-center">
					<text class="text-bold">请在当前页面保持屏幕唤醒\n</text>
					<text class="text-sm">因系统限制，若应用被后台清理将无法记录睡眠时间</text>
				</view>
				<button class="btn text-center" hover-class="blue" @click="toggleClose"><text
						class="text-blue">确定</text></button>
			</view>
		</uni-popup>
	</view>

</template>

<script>
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue'
	export default {
		components: {
			uniPopupMessage,
			uniPopupDialog,
			uniPopupShare
		},
		// onLoad() {
		// 	// const innerAudioContext = uni.createInnerAudioContext();
		// 	// 55-59行：音乐播放
		// 	// innerAudioContext.autoplay = true;
		// 	// innerAudioContext.src =
		// 	// 	'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';
		// 	// this.audioContext = innerAudioContext;
		// },
		// onUnload(){
		// 	this.audioContext.onStop();
		// },
		data() {
			return {
				date: "",
				status: false, //点击蒙层关闭对话框
				startSleepTime: "", //入睡时间
				endSleepTime: "", //醒来时间
				timing: false, //开始计算
				sleepTime: 0, //小睡时间
				music: null,
				isPlay: true,
				// audio:uni.createInnerAudioContext()
			}
		},
		methods: {
			//格式化日期
			getCurrentTime() {
				//获取当前时间
				let date = new Date();
				let hours = date.getHours(); //小时
				let minute = date.getMinutes(); //分
				minute = minute < 10 ? "0" + minute : minute;
				let time = hours + ":" + minute;
				this.date = time;
			},
			toggleClose() {
				//入睡时间
				this.startSleepTime = this.date;
				this.$refs.popup.close();
				this.timing = true;
			},
			jumpToEndSleep() {
				//醒来时间
				this.endSleepTime = this.date;
				this.timing = false;
				uni.redirectTo({
					//将入睡时间和醒来时间传到结算界面
					url: "/pages/monitor/endSleep?startSleepTime=" + this.startSleepTime + "&endSleepTime=" + this
						.endSleepTime +
						"&sleepTime=" + this.sleepTime,
				});
			},
			// 音乐播放
		// 	pauseMusic() {
		// 		this.isPlay = false;
		// 		this.audio.onPause(()=>{
		// 			console.log('暂停播放');
		// 		});
		// 	},
		// 	play() {
		// 		this.isPlay = true;
		// 		innerAudioContext.onPlay(() => {
		// 			console.log('开始播放');
		// 		});
		// 	}
		 },
		mounted() {
			this.getCurrentTime();
			clearInterval(myTimeDisplay);
			let myTimeDisplay = setInterval(() => {
				this.getCurrentTime(); //每秒更新一次时间
				if (this.timing) {
					//统计入睡时间
					this.sleepTime++;
				}
			}, 1000);

		},
		// 页面打开自动打开对话框
		onReady() {
			this.$refs.popup.open();
		},
	}
</script>

<style lang="scss">
	.content {
		height: 100%;
		background-image: linear-gradient(to top, #05DFC7, #39A8FD);
		display: flex;
		flex-direction: column;

		// 时间
		.date {
			flex: 1;
			margin: 100rpx auto 0;
		}

		//播放器
		.play {
			display: flex;
			flex-direction: column;
			margin: 0 auto 300rpx;
			// border: 1rpx solid;
			// border-radius: 50%;
			// width: 400rpx;
			// height: 400rpx;

			.music-name {
				flex: 1;
			}

			.play-status {
				flex: 1;
			}

			.play-control {
				display: flex;
				flex: 1;
				flex-direction: row;
				justify-content: space-around;
				padding: 0 50rpx;
				color: #FFFFFF;

				.size {
					font-size: 60rpx;
				}
			}
		}

		.end-sleep {
			text-align: center;
			width: 250rpx;
			padding: 10rpx;
			border: 4rpx solid #FFFFFF;
			border-radius: 40rpx;
			margin: 0 auto 150rpx;
		}

		// 弹出窗口
		.popup-content {
			background-color: #FFFFFF;
			width: 500rpx;
			height: 502rpx;
			border-radius: 10rpx;
			display: flex;
			flex-direction: column;

			.note-img {
				display: flex;
				flex: 2;
				flex-direction: row;
				justify-content: center;
				margin-top: 40rpx;
			}

			.prompt-info {
				flex: 2;
				justify-content: center;
				padding: 0 20rpx;
			}

			.btn {
				flex: 1;
				width: 100%;
				justify-content: flex-end;
			}

			.blue {
				background-color: #a5e1fd;
			}
		}
	}
</style>
